import { getProject_ranking, getDepartment_ranking } from '@/api/DataOperate'

import Mytable from '@/views/components/Mytable/index'

import { memo, useEffect, useState } from 'react'

import { Boardproject_type } from '@/utils/type'

import './Demandright.css'

const project_rankingcolumns = [
  {
    title: '项目名称',
    dataIndex: 'project_name',
    key: 'project_name',
    width: '206px',
    render: (text: any) => <span style={{ color: '#2080F0' }}>{text}</span>
  },

  {
    title: '需求来源',
    dataIndex: 'project_type',
    key: 'project_type',
    width: '200px',
    ellipsis: true,
    render: (name: any) => <span>{name === '' ? '--' : Boardproject_type(name)}</span>
  },

  { title: '需求数量', dataIndex: 'count', key: 'count' },

  { title: '需求数量占比', dataIndex: 'rate', key: 'rate', render: (rate: any) => <span>{Math.floor(rate * 100) / 100}%</span> },

  { title: '明细数据量级', dataIndex: 'deliver_data_count_sum', key: 'deliver_data_count_sum', width: '136px' }
]

const department_rankingcolumns = [
  {
    title: '部门',
    dataIndex: 'name',
    key: 'name',
    ellipsis: true,
    render: (text: any) => <span style={{ color: '#2080F0' }}>{text}</span>
  },

  { title: '需求订单数量', dataIndex: 'count', key: 'count' },

  { title: '需求订单数量占比', dataIndex: 'rate', key: 'rate', render: (rate: any) => <span>{Math.floor(rate * 100) / 100}%</span> }
]

const DemandRight = (props: any) => {
  const { time_min, time_max } = props

  const [project_rankingData, setproject_rankingData] = useState([])

  const [department_rankingData, setdepartment_rankingData] = useState([])

  useEffect(() => {
    getProject_ranking({
      time_min: time_min,
      time_max: time_max
    }).then((res) => {
      res.forEach((item: any, index: any) => {
        item.key = index + 1
        item.rate = item.rate * 100
      })
      setproject_rankingData(res)
    })

    getDepartment_ranking({
      time_min: time_min,
      time_max: time_max
    }).then((res) => {
      res.forEach((item: any, index: any) => {
        item.key = index + 1
        item.name = item.department.name
        item.rate = item.rate * 100
      })
      setdepartment_rankingData(res)
    })
  }, [time_min, time_max])

  return (
    <div className="demandRight">
      <div className="demandtopNoe h-554px" style={{ height: '554px' }}>
        <div className="tabletitle pb-32px">交付项目统计</div>
        <Mytable columns={project_rankingcolumns} maxHeight={425} data={project_rankingData} />
      </div>
      <div className="demandbottomNoe margin-t-l h-554px" style={{ height: '554px' }}>
        <div className="tabletitle pb-32px">需求部门统计</div>
        <Mytable maxHeight={425} columns={department_rankingcolumns} data={department_rankingData} />
      </div>
    </div>
  )
}
export default memo(DemandRight)
